<template>
	<view class="f-f-c">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#fff'
		:titleStyle="{ color: '#000'}"
		 title="一键预约" rightText='' :border="false" :placeholder="true">
			<view slot="left"></view>
		    <view slot="right"></view>
		 
		</u-navbar>
		<view class="wrapper" style="width: 100%;background: #ccc;">
			<u-sticky bgColor="#fff" style="width: 100%;">
		   	  <u-tabs style="width: 90vw;margin: 0 5vw;" lineColor='#1AC388' ref="tabs" :list="tabsList" :current="current" :is-scroll="false"  @change="tabsChange" ></u-tabs>
		    </u-sticky> 
		</view>
		<!-- :style="{height:swiperContentHeight}" -->
		<swiper class="swiper-group"  style="height: 230px;"
		:current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			
			<swiper-item class="swiper-item"    v-for="item,index in list" :key="index">
				 <!-- :style="{height:scrollerHeight}" -->
				<scroll-view id="scrollview"  :scroll-top="scrollTop"  
				class="scroll-content-container" style="height: 220px;"  scroll-y @scrolltolower="onreachBottom">
					<block>
			 
						<!-- 单选 -->
						<view class="f-w m20" >
							  <view class="itmebox"
								v-for="it2,id2 in item.childCategorizeVoList" :key="id2" @click="pushOne(it2)"
								:class='selItem.id == it2.id ? "active":"" '>
								  <image :src="it2.imgUrl" style="width: 156rpx;height: 118rpx" mode=""></image>
								  <span class="pt10">{{it2.name}}</span>
							   </view> 
						</view>
						
					</block>
					
				</scroll-view>
				
			</swiper-item>
		
		</swiper>
		<view class="pl20 c3" style="height: 40rpx;">
			预约废品
		</view>
		<view class="p20" style="overflow-y: scroll;" :style="{height:overHeight}">
			
			<view class="f-s-b mb10 b-rd b-s p10 c3 f28" v-for="item,ix in addList" :key="ix">
				<span>{{item.name}}</span>
				<span>{{item.price}}元/{{item.unit ? item.unit :'' }}</span>
				<span>{{item.weight}}{{item.unit}}</span>
				<u-icon @click="updateList(item)" name="edit-pen-fill" color="#FF4A4A" size="16"></u-icon>
				<u-icon @click="redList(ix)" name="minus-circle-fill" color="#FF4A4A" size="16"></u-icon>
			</view>
			<view class="sureBtn3 f-c"  @click="addShow()">
				<u-icon name="plus" color="var(--theme)" size="20"></u-icon>
			</view>
		</view>
		
		 <!-- @click="navTo('/pagesA/order/orderUpdate')" -->
		<view class="sureBtn btm0" @click="addListApi()" >
			立即预约
		</view>
		<!-- <view class="sureBtn" style="transform: translate(-50%,-120rpx);" >
			添加
		</view> -->
		<u-popup :show="show":round="4" mode="center"  @close="close" @open="open">
			<view style="width: 98vw;" class="f-f-c p20">
				<view class="f-s-b" >
					<span></span>
					<span>添加</span>
					<u-icon @click="close" name="close" color="#333" size="16"></u-icon>
				</view>
				<view class="">
					<view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">种类</span>
						<view class="m10 inputbox f pl20 pr20">
							<input type="text" v-model="selItem.name" placeholder="请输入" disabled/>
							<!-- <u-icon name="arrow-down" color="#ccc" size="16"></u-icon> -->
						</view>
					</view>
					<!-- <view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 80rpx;;white-space: nowrap;">计量类型</span>
						<view class="m10 inputbox f " style="border: none;">
							<u-radio-group 
							    v-model="selItem.countType" disabled
							    placement="row">
								<u-radio activeColor="green" :name="0">重量</u-radio>
								<u-radio activeColor="green" :name="1">数量</u-radio>
								
							</u-radio-group>
						</view>
					</view>
					<view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 80rpx;;white-space: nowrap;">价格类型</span>
						<view class="m10 inputbox f " style="border: none;">
							<u-radio-group 
							    v-model="selItem.priceType" disabled
							    placement="row">
								<u-radio activeColor="green" :name="0">固定价格</u-radio>
								<u-radio activeColor="green" :name="1">议价</u-radio>
								
							</u-radio-group>
						</view>
					</view> -->
					<view class="f-s-b ">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">价格</span>
						<view class="m10 inputbox f-s-b">
							<input type="text" style="flex: 1;" v-if='!selItem.priceType' v-model="selItem.fixedPrice"  placeholder="固定价格" disabled/>
							<input type="text" style="flex: 1;" v-else v-model="selItem.price" placeholder="议价"/>
							<span class="c9 f24">元/{{selItem.unit ? selItem.unit:"" }}</span>
						</view>
					</view>
					
					<view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">单位</span>
						<view class="m10 inputbox f">
							<input type="text" v-model="selItem.unit" placeholder="请输入" disabled/>
							<!-- <span class="c9 f24">元/kg</span> -->
						</view>
					</view>
					<view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">{{selItem.countType ? '数量':'估重'}}</span>
						<view class="m10 inputbox f-s-b">
							<input type="text"  style="flex: 1;" v-model="selItem.weight" placeholder="请输入" />
							<span class="c9 f24" >{{selItem.unit ? selItem.unit:''}}</span>
						</view>
					</view>
					<view class="pt20 pb20" style="display: flex;">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">图片</span>
						<view class="m10  f" @click="chooseImg">
							<image style="width: 150rpx;" mode="widthFix"
							 :src="upimgUrl ?upimgUrl : 'https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/upimg.png'" 
							 ></image>
							<!-- <input type="text" placeholder="请输入" /> -->
							<!-- <span  class="c9 f24" >kg</span> -->
						</view>
					</view>
					
					<view class="f-f-c-c p20">
						<!-- <view class="btn mb20" @click="navTo('/pages/cart/weigh')"> 自动输入</view> -->
						<view class="btn" @click="addListFn()"> 确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<custom-tabbar :activeIndex="2"/>
	</view>
</template>


<script>
		import customTabbar  from '@/components/customTabbar.vue'
	import {
	    mapState
	} from 'vuex';
	export default {
		onShareAppMessage() {
		  return {
		    title: '清能科技回收',
		    path: '/pages/cart/cart',
		    imageUrl: '/static/huishou/logo.png'
		  }
		},
		onShareTimeline() {
		  return {
		    title: '清能科技回收',
		    query: '', // 可选参数
		       imageUrl: '/static/huishou/logo.png'
		  }
		},
		components: {
	
				customTabbar
		},
		data() {
			return {
				tabsList: [{
					name: '废纸'
				},{
					name: '废品家纺'
				},{
					name: '家电'
				},{
					name: '金属'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollerHeight: 0,
				swiperContentHeight: 0,
				overHeight:0,
				scrollTop:9999,
				indexArr0:[],
				arrList:{
					// indexArr0:[],
		 
				},
				keyname:'indexArr',
				list:[],
				show:false,
				upimgUrl:'',
				// 单选
				selItem:{},
				addList:[],
				isupdate:false,
				
			}
		},
		
		onReady() {
			this.getScollHeight()
		},
		onLoad(){
			
		},
		
		onShow() {
			
			let i = uni.getStorageSync('currentType')
			if( i != null && i != undefined){
				this.current = i  
				this.swiperCurrent = i 
				console.log(i,'iiiiiii')
			}
			this.getData()
			
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			refreshRequest() {
				this.addList = []
					// 这里面可以调用刷新该页面的方法
					console.log('刷新飒飒飒')
					// this.getData() 
				},
			addShow(){
				this.isupdate = false
				
				if(!this.selItem.id){
					this.$api.msg('请选择种类！')
					return
				}
				let isadd = false
				this.addList.map((item)=>{
					if(item.id == this.selItem.id){isadd = true}
				})
				if(isadd == true){
					this.$api.msg('该种类已添加！')
					return
				}
				this.selItem.weight = ''
				// this.selItem.countType = 0
				// this.selItem.priceType = 0
				if(this.selItem.priceType == 1){
					this.selItem.price = null
				}
				this.selItem.fixedPrice = JSON.parse(JSON.stringify(this.selItem.price))
				this.show = true
			},
			chooseImg(){
				this.$api.uploadImg(1,(res)=>{
					console.log(res,'upimgUrl')
					this.upimgUrl = res
					//uni.setStorageSync('userInfo',this.userInfo)
				})
			},
			getData(){
				this.$api.request('get', 'categorize/app/allList').then(res => {
					console.log(res.data)
					this.tabsList = res.data.map((item,index)=>{
					    this.arrList[this.keyname+index] = []
						return {name:item.name}
					})
					this.list = res.data
				    // console.log(this.arrList,'this.arrList')
				})
			},
			// 使用这个为同时添加多个
			pushIn(val,index,item){
				let i = this.arrList[this.keyname+index].indexOf(val)
				if(i >= 0){this.arrList[this.keyname+index].splice(i,1)
				}else{this.arrList[this.keyname+index].push(val)
				}
				this.$forceUpdate()
			},
			// 使用这个为一次只添加一个
			pushOne(item){
				this.selItem = item
				this.upimgUrl = ''
			},
			addListFn(){
				if(!this.selItem.weight){
					this.$api.msg('请输入重量！')
					return 
				}
				if(this.selItem.price){
					if(!this.selItem.unit){
						this.$api.msg('请输入单位！')
						return 
					}
				}
				// if(!this.upimgUrl){
				// 	this.$api.msg('请上传图片')
				// 	return 
				// }
				
				var price = 0
				if(this.selItem.priceType == 0){
					price = this.selItem.fixedPrice
				}else{
					price = this.selItem.price
					
				}
				
				if(this.isupdate){
					this.show = false
					this.selItem = {}
					return
				}
				let obj = {
					id:this.selItem.id,
					name:this.selItem.name,
					price:price,
					unit:this.selItem.unit,
					countType:this.selItem.countType,
					priceType:this.selItem.priceType,
					weight:this.selItem.weight,
					imgUrl:this.upimgUrl
				}
				this.addList.push(obj)
				
				this.selItem = {}
				this.show = false
			},
			updateList(item){
				this.isupdate = true
				this.selItem = item
				this.selItem.fixedPrice = JSON.parse(JSON.stringify(this.selItem.price))
				this.show = true
			},
			redList(ix){
				this.addList.splice(ix,1)
			},
			addListApi(){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
				if(this.addList.length == 0){
					this.$api.msg('请增加预约废品!')
					return 
				}
				this.navTo('/pagesA/order/orderUpdate?data=' + JSON.stringify(this.addList))
				// let amount = 0
				// this.addList.map((item)=>{
				// 	amount += Number(item.weight)*Number(item.price)
				// 	return item.amount = Number(item.weight)*Number(item.price)
				// })
				
				// @click="navTo('/pagesA/order/orderUpdate?data=' + JSON.stringify(addList) )"
				// console.log()
				// this.$api.request('post', 'appOrder/app/add', {
				// 	amountTal:amount,
				// 	expectAmountTal:amount,
				// 	"createTime": "2023-11-25 17:07:57",
				// 	"updateTime": "2023-11-27 17:08:06",
				// 	"startTime": "2023-11-25 17:07:57",
				// 	"endTime": "2023-11-25 17:07:57",
				// 	hsUserWasteVoList:this.addList
				// }).then(res => {
				//    console.log(res.data)
				// })
			},
			 
			//rpx转为px 传参类型是数字（Number） 
			rpxTopx(rpx) {
				const screenWidth = uni.getSystemInfoSync().screenWidth //窗口宽度
			    let px = (screenWidth / 750) * Number.parseInt(rpx) //转换单位为px
				return  Math.floor(px)
			},
			 
			//px转rpx 传参类型是数字（Number）
			pxToRpx(px) {
				const screenWidth = uni.getSystemInfoSync().screenWidth //窗口宽度
			    let rpx =  (750 * Number.parseInt(px)) / screenWidth //转换单位为rpx
				return  Math.floor(rpx)
			},
			// 设置scoll高度
			getScollHeight(){
				let that = this
				uni.getSystemInfo({
					success: function (res) {
						let windowHeight= res.windowHeight;
						that.swiperContentHeight = (windowHeight-120 -70 - 200 ) + 'px';
						that.scrollerHeight = (windowHeight-120-15 - 70 - 200) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					    that.overHeight = (windowHeight-240 - 50 - 50 - 80) + 'px';
						
						// #ifdef  MP-WEIXIN
						let h = that.pxToRpx(res.windowHeight)
						that.overHeight = (h - 40 - 60 - that.pxToRpx(230 + 88  + 40) - 98) + 'rpx';
						// #endif
						// console.log(that.overHeight,'that.overHeight')
					}
				});
			},
			tabsChange(e) {
				// console.log(e.index,'indexindexindexindex')
				// return
				this.swiperCurrent = e.index;
				uni.setStorageSync('currentType', e.index)
				
			},
			transition(e) {
				let dx = e.detail.dx;
				// this.$refs.tabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				// this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				uni.setStorageSync('currentType', current)
				
				// console.log(current)
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			},
			open() {
				// console.log('open');
			  },
			  close() {
				this.show = false
				// console.log('close');
			  },
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}
	.wrapper {
	  background: rgb(227, 236, 250);
	
	  ::v-deep .u-sticky {
		height: 100rpx;
		display: flex;
		justify-content: center;
	  }
	  ::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 40rpx;
	  }
	 /* ::v-deep .u-tabs__wrapper__nav__line{
		  background:var(--theme) !important;
	  } */
	}
	.itmebox{
		width: 160rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin: 0 16rpx 20rpx 0;
	}
	.active{
		border: 2rpx solid #1AC388;
		color: #1AC388;
	}
	.btn{
		width: 100%;
		height: 68rpx;
		background: #1AC388;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color:#fff;
	}
	.btn2{
		width: 100%;
		height: 68rpx;
		background: rgba(26,195,136,0);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color: var(--theme);
		
	}
	.btm0{
	

		bottom:160rpx
	
	}
	.inputbox{
		flex: 1;
		width: 440rpx;
		height: 100rpx;
		padding: 20px;
		border: 1px solid #999;
		margin: 10px 0;
	}
	
	
</style>
